<template>
  <div class="allStyle" v-if="carsData">
    <el-row class="infor-title">
      <el-col :span="4">
        <div class>车辆图片</div>
      </el-col>
      <el-col :span="4">
        <div class>车牌信息</div>
      </el-col>
      <el-col :span="4">
        <div class>车型信息</div>
      </el-col>
      <el-col :span="4">
        <div class>车辆租金</div>
      </el-col>
      <el-col :span="4">
        <div class>车辆状态</div>
      </el-col>
      <el-col :span="4">
        <div class>操作</div>
      </el-col>
    </el-row>
    <el-row class="infor-box" v-for="(item,index) in carsData" :key="index">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <img class="carImg" :src="item.carImg[0]" alt />
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">{{item.carnumber}}</div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">{{item.brank}} / {{item.type}}</div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">{{item.rent}}元/天</div>
      </el-col>
      <el-col :span="4" v-if="item.checkState=='0'">
        <div  v-if="item.rentalState=='0'" class="grid-content">待审核</div>
        <div  v-if="item.rentalState=='2'" class="grid-content">已下架</div>
      </el-col>
      <el-col :span="4" v-if="item.checkState=='1'">
        <div v-if="item.rentalState=='0'" class="grid-content">待出租</div>
        <div v-if="item.rentalState=='1'" class="grid-content">已出租</div>
        <div  v-if="item.rentalState=='2'" class="grid-content">已下架</div>
      </el-col>
      <el-col :span="4" v-if="item.checkState=='2'">
        <div class="grid-content">审核失败</div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <el-row class="btn">
            <el-button type="danger" @click="goDetail(item._id)" round>详情</el-button>
            <el-button
              v-if="item.checkState!='2'&&item.rentalState!='2'"
              type="info"
               @click="soldOut(item._id)"
              round
            >下架</el-button>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 3]"
      :page-size=" pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="allNumber">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["nowIndex"],
  data() {
    return {
      carsData: [],
      pageSize:3,
      currentPage: 1,
      allNumber:0
    };
  },
  mounted() {
    this.getCarsList();
  },
  watch: {
    nowIndex() {
      this.getCarsList();
    },
    current(){
        this.currentPage=1
        this.getCarsList()
      },
      currentPage(){
        this.getCarsList()
      },
      pageSize(){
         this.getCarsList()
       }
  },
  methods: {
    getAllCars() {
      axios.get("/cars/allCarsInfor", { params: {pageSize:this.pageSize,currentPage: this.currentPage} }).then(res => {
        this.carsData = res.data[0];
        this.allNumber = res.data[1];
      });
    },
    getCheckingCars() {
      axios
        .get("/cars/checkingCars", { params: { checkState: this.nowIndex ,pageSize:this.pageSize,currentPage: this.currentPage} })
        .then(res => {
          this.carsData = res.data[0];
        this.allNumber = res.data[1];
        });
    },
    getSolidOutCars() {
      axios
        .get("/cars/checkingCars", { params: { rentalState: "2" ,pageSize:this.pageSize,currentPage: this.currentPage} })
        .then(res => {
          this.carsData = res.data[0];
        this.allNumber = res.data[1];
        });
    },
    getCarsList() {
      if (this.nowIndex == "3") {
        this.getAllCars();
      }else if(this.nowIndex == "4"){
        this.getSolidOutCars();
      } else {
        this.getCheckingCars();
      }
    },
    goDetail(_id) {
      this.$router.push({ path: "/carDetail", query: { _id} })
    },
    soldOut(_id){
      axios
        .post("/cars/changeState", {_id,rentalState:"2" })
        .then(res => {
          this. getCarsList()
        });
    },
    handleSizeChange(val) {
        this.pageSize=val
      },
      handleCurrentChange(val) {
        this.currentPage=val
      },
  }
};
</script>

<style  scoped>
.allStyle{
  color: silver;
}
.carImg {
  width: 100%;
}
.infor-box {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #dbdbdb;
}
.infor-title {
  margin-bottom: 10px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.grid-content {
  width: 180px;
  height: 120px;
  line-height: 120px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>